<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1;" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=yes" />
    <meta content="false" name="twcClient" id="twcClient" />
    <link href="../lib/bootstrap/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="../src/css/pages/body.css" rel="stylesheet" type="text/css">
    <link href="../src/css/pages/nxdc.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
    <title>NDP media web ui lib</title>
</head>

<body>
    <div class="container-fluid ndp-ui-header"></div>
    <div class="container-fluid ndp-ui-kitchen">
        <div class="container">
            <h1 class="com-title">COMPONENTS</h1>
            <p class="com-desc">NDP MEDIA UI Components Library</p>
        </div>
    </div>
    <div class="container ndp-ui-main">
        <div class="ndp-ui-demo-wrapper">
            <div class="ndp-example">
                <h4>普通列表[html]</h5>
                <div class="ndp-table-wrapper ndp-table2-wrapper">
<ul class="ndp-table-header"><li class="ndp-table-row"><span class="ndp-table-col" style="width: 25%;">第一列<i class="col-spliter"></i></span><span class="ndp-table-col" style="width: 25%;">第二列<i class="col-spliter"></i></span><span class="ndp-table-col" style="width: 25%;">第三列<i class="col-spliter"></i></span><span class="ndp-table-col" style="width: 25%;">第四列</span></li></ul>
<ul class="ndp-table-body"><li class="ndp-table-row"><span class="ndp-table-col" style="width: 25%;">1101</span><span class="ndp-table-col" style="width: 25%;">hello123</span><span class="ndp-table-col" style="width: 25%;">hello -china 123</span><span class="ndp-table-col" style="width: 25%;">man</span></li><li class="ndp-table-row"><span class="ndp-table-col" style="width: 25%;">1102</span><span class="ndp-table-col" style="width: 25%;">hello_23</span><span class="ndp-table-col" style="width: 25%;">hello - japan 34</span><span class="ndp-table-col" style="width: 25%;">woman</span></li><li class="ndp-table-row"><span class="ndp-table-col" style="width: 25%;">1103</span><span class="ndp-table-col" style="width: 25%;">hello_34</span><span class="ndp-table-col" style="width: 25%;">hello - euro 23</span><span class="ndp-table-col" style="width: 25%;">no sign</span></li></ul>               
                </div>               
            </div>
            <div class="highLight">
            <pre class="brush:xml">
               &lt;div class=&quot;ndp-table-wrapper&quot;&gt;
                    &lt;ul class=&quot;ndp-table-header&quot;&gt;
                        &lt;li class=&quot;ndp-table-row&quot;&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;
                            Offer ID
              &lt;div class=&quot;sort-direct&quot;&gt;
                &lt;i class=&quot;glyphicon glyphicon-triangle-top active&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;glyphicon glyphicon-triangle-bottom&quot;&gt;&lt;/i&gt;
              &lt;/div&gt;                            
                            &lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;Offer Name&lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;Permission&lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;
                            Payout($)
              &lt;div class=&quot;sort-direct&quot;&gt;
                &lt;i class=&quot;glyphicon glyphicon-triangle-top active&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;glyphicon glyphicon-triangle-bottom&quot;&gt;&lt;/i&gt;
              &lt;/div&gt;                            
                            &lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;
                            Caps
              &lt;div class=&quot;sort-direct&quot;&gt;
                &lt;i class=&quot;glyphicon glyphicon-triangle-top active&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;glyphicon glyphicon-triangle-bottom&quot;&gt;&lt;/i&gt;
              &lt;/div&gt;                            
                            &lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;第六列&lt;/span&gt;                        
                        &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;ul class=&quot;ndp-table-body&quot;&gt;
                        &lt;li class=&quot;ndp-table-row&quot;&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;1101&lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;App Download-UCweb-Android(ID)&lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;内容3&lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;内容4&lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;内容5&lt;/span&gt;
                            &lt;span class=&quot;ndp-table-col&quot;&gt;内容6&lt;/span&gt;                        
                        &lt;/li&gt;
                              ..........     
                    &lt;/ul&gt;
                &lt;/div&gt;  
            </pre>
        </div>              
        </div>
        <div class="ndp-ui-demo-wrapper">
            <div class="ndp-example ndp-js-example1">
                <h4>普通列表(js) <button class="btn btn-info" id="up">点击更新列表数据</button>  </h4>
                <div class="ndp-table-wrapper"></div>
            </div>
            <div class="highLight">
                <pre class="brush:js">
                $(".ndp-table-wrapper").table({
                    header:{col1:"第一列",col2:"第二列",col3:"第三列",col4:"第四列"},//["Offer ID","col 2","COl 3","Col 4"]
                    data:[{id:1101,name:"hello123",info:"hello -china 123",gender:"man"},
                          {id:1102,name:"hello_23",info:"hello - japan 34",gender:"woman"},
                          {id:1103,name:"hello_34",info:"hello - euro 23",gender:"no sign"}]
                });
                </pre>
            </div>
        </div>
        <div class="ndp-ui-demo-wrapper">
            <div class="ndp-example ndp-js-example2">
                <h5>普通列表(js)--行选中效果，配置 rowNail:true ，  activeRow:1 默认第几行选中</h5>
                <div class="ndp-table-wrapper"></div>
            </div>
            <div class="highLight">
                <pre class="brush:js">
                $(".ndp-table-wrapper").table({
                    head:{col1:"第一列",col2:"第二列",col3:"第三列",col4:"第四列"},//["Offer ID","col 2","COl 3","Col 4"]
                    data:[{id:1101,name:"hello123",info:"hello -china 123",gender:"man"},
                          {id:1102,name:"hello_23",info:"hello - japan 34",gender:"woman"},
                          {id:1103,name:"hello_34",info:"hello - euro 23",gender:"no sign"}],
                    rowNail:true,//允许选中行
                    activeRow:1//默认选中行索引，base:0
                });
                </pre>
            </div>
        </div>
        <div class="ndp-ui-demo-wrapper">
            <div class="ndp-example ndp-js-example3">
                <h5>普通列表(js)--列选中效果，配置 colNail:true， activeCol:1 默认第几列选中</h5>
                <div class="ndp-table-wrapper"></div>
            </div>
            <div class="highLight">
                <pre class="brush:js">
                $(".ndp-table-wrapper").table({
                    head:{col1:"第一列",col2:"第二列",col3:"第三列",col4:"第四列"},//["Offer ID","col 2","COl 3","Col 4"]
                    data:[{id:1101,name:"hello123",info:"hello -china 123",gender:"man"},
                          {id:1102,name:"hello_23",info:"hello - japan 34",gender:"woman"},
                          {id:1103,name:"hello_34",info:"hello - euro 23",gender:"no sign"}],
                    colNail:true,//允许选中列
                    activeCol:1//默认选中的列索引，base 0
                });
                </pre>
            </div>
        </div>
        <div class="ndp-ui-demo-wrapper">
            <div class="ndp-example ndp-js-example4">
                <h5>普通列表(js)--纵向滚动条，配置<strong> listHeight:"250px" </strong></h5>
                <div class="ndp-table-wrapper"></div>
            </div>
            <div class="highLight">
                <pre class="brush:js">
                $(".ndp-table-wrapper").table({
                    head:{col1:"第一列",col2:"第二列",col3:"第三列",col4:"第四列"},//["Offer ID","col 2","COl 3","Col 4"]
                    data:[{id:1101,name:"hello123",info:"hello -china 123",gender:"man"},
                          {id:1102,name:"hello_23",info:"hello - japan 34",gender:"woman"},
                          {id:1103,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1104,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1105,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1106,name:"hello_35",info:"hello - euro 23",gender:"no sign"},
                          {id:1107,name:"hello_36",info:"hello - euro 23",gender:"no sign"}],
                     listHeight:"250px"     
                });
                </pre>
            </div>
        </div>
        <div class="ndp-ui-demo-wrapper">
            <div class="ndp-example ndp-js-example5">
                <h5>普通列表(js)--排序按钮，配置<strong> sort:"all"/[1,2,3] </strong></h5>
                <div class="ndp-table-wrapper"></div>
            </div>
            <div class="highLight">
                <pre class="brush:js">
                $(".ndp-table-wrapper").table({
                    head:{col1:"第一列",col2:"第二列",col3:"第三列",col4:"第四列"},//["Offer ID","col 2","COl 3","Col 4"]
                    data:[{id:1101,name:"hello123",info:"hello -china 123",gender:"man"},
                          {id:1102,name:"hello_23",info:"hello - japan 34",gender:"woman"},
                          {id:1103,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1104,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1105,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1106,name:"hello_35",info:"hello - euro 23",gender:"no sign"},
                          {id:1107,name:"hello_36",info:"hello - euro 23",gender:"no sign"}],
                     listHeight:"250px"     
                });
                </pre>
            </div>
        </div>
        <div class="ndp-ui-demo-wrapper">
            <div class="ndp-example ndp-js-example5">
                <h5>列可以拖动 column resizeable table<strong> 默认列是允许被拖动的 </strong></h5>
                <div class="ndp-js-example6 ndp-table-wrapper"></div>
            </div>
            <div class="highLight">
                <pre class="brush:js">
                $(".ndp-table-wrapper").table({
                    head:{col1:"第一列",col2:"第二列",col3:"第三列",col4:"第四列"},//["Offer ID","col 2","COl 3","Col 4"]
                    data:[{id:1101,name:"hello123",info:"hello -china 123",gender:"man"},
                          {id:1102,name:"hello_23",info:"hello - japan 34",gender:"woman"},
                          {id:1103,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1104,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1105,name:"hello_34",info:"hello - euro 23",gender:"no sign"},
                          {id:1106,name:"hello_35",info:"hello - euro 23",gender:"no sign"},
                          {id:1107,name:"hello_36",info:"hello - euro 23",gender:"no sign"}]  
                });
                </pre>
            </div>
        </div>
        <div class="container-fluid ndp-ui-footer"></div>
        <script src="../lib/requirejs/require.js" data-main="../src/js/demo-table"></script>
</body>

</html>
